<template>
    <view class="u-demo-block">
        <view>
            <u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
        </view>
        <view class="vView">
            <view class="vView-v">
                <view class="vv-1">
                    <!--商品循环开始-->
                    <!--非待支付-->
                    <view v-if="current!=0">
                        <view class="goodsView" v-for="o in orderGoods">
                            <u-avatar shape="square" class="tv-img1" :src="o.picUrl" size="80"></u-avatar>
                            <view class="gv-1">
                                <view>{{o.spuName}}</view>
                                <view style="color: #9d9d9d;font-size: 12px">{{o.skuName}}</view>
                            </view>
                            <view class="gv-2">
                                <view>￥ {{o.goodsPrice}}</view>
                                <view style="color: #9d9d9d;font-size: 12px">*{{o.amount}}</view>
                            </view>


                            <view class="gv-3">
                                <view v-if="current==0">
                                    <u-button @click="paymentOrder(o)" type="error" class="but1" text="去支付" size="mini" shape="circle"></u-button>
                                    <u-button @click="cancelOrder(o)" type="info" class="but1" text="取消订单" size="mini" shape="circle"></u-button>
                                </view>
                                <view v-if="current==1">
                                    <u-button @click="applyRefund(o)" type="info" class="but1" text="申请退款" size="mini" shape="circle"></u-button>
                                </view>
                                <view v-if="current==2">
                                    <u-button @click="takeGoods(o)" type="info" class="but1" text="确认收货" size="mini" shape="circle"></u-button>
                                </view>
                                <view v-if="current==3">
                                    <u-button @click="goComment(o)" type="info" class="but1" text="去评价" size="mini" shape="circle"></u-button>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!--待支付-->
                    <view v-if="current==0 && orderPays.length>0">
                        <view class="goodsView" v-for="o in orderPays">
                            <view  class="tv-img2">
                                <u-avatar-group
                                        :urls="o.picUrls"
                                        size="45"
                                        gap="0.4"

                                ></u-avatar-group>
                            </view>
                            <view class="gv-1">
                                <view></view>
                                <view style="color: #9d9d9d;font-size: 12px"></view>
                            </view>
                            <view class="gv-2">
                                <view>￥ {{o.totalPrice}}</view>
                                <view style="color: #9d9d9d;font-size: 12px">*{{o.totalAmount}}</view>
                            </view>
                            <view class="gv-3">
                                <view v-if="current==0">
                                    <u-button @click="paymentOrder(o)" type="error" class="but1" text="去支付" size="mini" shape="circle"></u-button>
                                    <u-button @click="cancelOrder(o)" type="info" class="but1" text="取消订单" size="mini" shape="circle"></u-button>
                                </view>
                            </view>
                        </view>
                    </view>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import Request from '../../utils/request'
    export default {
        data() {
            return{
                list: ['未付款','待发货', '待收货', '待评价'],
                userId:1,
                mail:{
                    id:'',
                    userId:'',
                    state:0,
                    addressee:'',
                    address:'',
                    phone:'',
                },
                current: 0,
                orderGoods:[
                    {
                        amount: 0,
                        id: 0,
                        picUrl: "",
                        price: 0,
                        skuId: 0,
                        skuName: "",
                        spuId: 0,
                        spuName: ""
                    }
                ],
                orderPays:[
                    // {
                    //     cartNumber: '',
                    //     picUrls: [],
                    //     totalPrice: 0,
                    //     totalAmount: 0,
                    // }
                ]
            }
        },
        created(){
            //alert(uni.getStorageSync("current"))
            if(uni.getStorageSync("current")!=undefined) {
                this.current = uni.getStorageSync("current")
                this.sectionChange(this.current)
            }
        },
        methods:{
            reload() {
                // 获取当前页面路由 具体请看该函数的实现
                const url = this.getPageUrl(1)
                uni.reLaunch({
                    url,
                    success: () => {
                        console.log('reload触发了!!!!!! url====>' + url)
                    }
                })
            },
            /*切换 分段器 商品状态*/
            sectionChange(index) {
                this.current=index
                Request.request('management-mall/leyou.order/order-goods/waitOrderState'
                    , {userId: this.userId,state:index+1}, 'post').then(res => {
                    console.log(res)
                    if(res.success){
                        if(this.current==0){
                            this.orderPays=res.data.list
                        }else{
                            this.orderGoods=res.data.list
                        }

                    }
                }).catch(error => {
                    console.error(error)
                })
            },
            /*取消订单*/
            cancelOrder(o){
                Request.request('management-mall/leyou.order/order-goods/cancelOrder'
                    , {cartNumber:o.cartNumber}, 'post').then(res => {
                    console.log(res)
                    if(res.success){
                        uni.showToast({
                            title:'ok?'
                        })

                    }
                }).catch(error => {
                    console.error(error)
                })
            },
            /*支付订单*/
            paymentOrder(o){
                uni.setStorageSync("cartNumber",o.cartNumber)
                uni.navigateTo({
                    url:'/pages/sjh/writeOrderWaitPay'
                })
            },
            /*申请退款*/
            applyRefund(o){
                Request.request('management-mall/leyou.order/order-goods/applyRefund'
                    , {id:o.id}, 'post').then(res => {
                    console.log(res)
                    if(res.success){
                        uni.showToast({
                            title:'ok?'
                        })
                    }
                }).catch(error => {
                    console.error(error)
                })
            },
            /*确认收货*/
            takeGoods(o){
                Request.request('management-mall/leyou.order/order-goods/takeGoods'
                    , {id:o.id}, 'post').then(res => {
                    console.log(res)
                    if(res.success){
                        uni.showToast({
                            title:'ok?'
                        })
                    }
                }).catch(error => {
                    console.error(error)
                })
            },
            /*去评论*/
            goComment(o){
                uni.setStorageSync("orderId",o.id)
                uni.navigateTo({
                    url:'/pages/sjh/goodsComment'
                })
            }
        }
    }
</script>

<style>
    .vView{

    }
    .vView-v{

    }
    .vv-1{

    }
    .vv-2{

    }
    .goodsView{
        margin: 10px 5px;
        border-radius: 20px;
        padding: 12px;
        background: #e1f3d8;
    }
    .tv-img1{
        display: inline-block;
        margin: 8px;
    }
    .tv-img2{

        display: inline-block;
    }
    .gv-1{
        width: 180px;
        padding-top: 20px;
        vertical-align: top;
        display: inline-block;

        overflow: hidden;
    }
    .gv-2{
        padding-right: 5px;
        float: right;
        padding-top: 20px;
        vertical-align: top;
        display: inline-block;

        text-align: right;
    }
    .gv-3{
        height: 30px;
    }
    .but1{
        margin-left: 10px;
        padding: 12px 0;
        float: right;
        width:70px
    }
</style>
